<template>
  <div class="login-layout" id="login">
    <span class="welcome">医废管理平台</span>
    <div class="input">
      <span>欢迎登陆</span>
      <van-field
        v-model="value"
        label="工号"
        label-width="40px"
        placeholder="请输入工号"
        :style="{
          borderBottom: '1px solid #000000',
          marginBottom: 15 + 'px',
        }"
      />

      <van-field
        v-model="value"
        label-width="40px"
        label="密码"
        placeholder="请输入密码"
        :style="{
          borderBottom: '1px solid #000000',
          marginBottom: 10 + 'px',
        }"
      />

      <van-button
        type="info"
        round
        :style="{
          width: 100 + '%',
          marginTop: 30 + 'px',
          color: '#FFFFFF',
        }"
        to="/home"
      >登陆</van-button>

      <van-divider
        :style="{
          borderColor: '#D1D1D1',
          color: '#707070',
          marginTop: 30 + 'px',
        }"
      >或</van-divider>

      <!-- <i class="iconfont icon-saomiao login-scan"></i> -->
      
      <van-image round width="3.5rem" height="3.5rem" :src="require('../../assets/imgs/login/scan.png')" /><br />
      <span class="scan-card">扫描工牌</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped lang="less">
.login-layout {
  width: 100vw;
  text-align: center;
  background-image: url("../../assets/imgs/login/banner.png");
  background-size: 100% 100%;
  & .welcome {
    height: 25vh;
    line-height: 40vh;
    font-size: 1.5rem;
    display: block;
    color: #ffffff;
    text-align: left;
    margin-left: 20px;
    // margin-bottom: 50px;
  }
  & .input {
    & > span:nth-child(1) {
      display: block;
      margin-bottom: 50px;
      width: 100%;
      text-align: left;
    }
    margin: 0 auto;
    background-color: #ffffff;
    // border-radius: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding-top: 30px;
    padding: 30px 20px 0 20px;
    .login-scan {
      font-size: 2.5rem;
      background-color: #ffffff;
    }
    .scan-card {
      font-size: 0.8rem;
      color: #707070;
    }
  }
}
</style>
